@import './com';

header{
    display: flex;
    flex-direction: column;
    align-items: center;
    .h_top{
        position: relative;
        width: vw(750);
        height: vw(131);

     // 头部内容
        >ul{
            height: vw(124);
            position: absolute;
            top: vw(50);
            left: vw(23);
            font-size: vw(26);
            width: vw(705);
            height: vw(57);
            @extend .flex;
            align-items: center;
            
            >li:first-of-type{
                display: flex;
                align-items: center;
                justify-content: center;
                width: vw(123);
                height: vw(57);
                border: vw(1) solid $col;
                border-radius: vw(20);
            }
            >li:last-of-type{
             
                >img{
                  
                    width: vw(50);
                    height: vw(50);
                }
            }
         
    }
   
  }
  .car{
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
          width: vw(705);
          height: vw(260);
      }
      ul:first-of-type{
          position: relative;
          width: vw(690);
          height: vw(120);
          @extend .flex;
          align-items: center;
          li:first-child{
            white-space:normal;
              font-size: vw(72);
              color: $col;
          }
          li:last-child{
              margin-right: vw(13);
              width: vw(110);
              height: vw(60);
              background-color: $col;
              border-radius:vw(20) ;
              display: flex;
              justify-content: center;
              align-items: center;
              >a{
              color: #fff;
              font-size: vw(30);


              }
          }
      }
      ul:last-of-type{
          @extend .flex;
          align-items: center;
        //   margin-top: vw(25);
          margin-bottom: vw(35);
          width: vw(664);
          height: vw(37);
          >li:first-child{
              span{
                  color: $col;
              }
              font-size: vw(30);
              img{
                  position: relative;
                  top: vw(5);
                  width: vw(37);
                  height: vw(37);
              }
          }
          >li:last-child{
              font-size: vw(26);
              color: #8e8e8e;
          }
      }
  }
}

main{
    margin: 0 auto;
    width: vw(664);
    .title{
        background-color:$col;
        color: #fff;
        height: vw(67);
        @extend .flex;
        align-items: center;
        margin-bottom: vw(10);
        >p:first-child{
            font-size: vw(30);
            margin-left: vw(10);
        }
        >p:last-child{
            font-size: vw(48);
            margin-right: vw(10);
        }
    }
    // 底部文字加图片
    .m_bt{
        margin-bottom: vw(8);
        @extend .flex;
        width: vw(664);
        height: vw(176);
        // 图片加文字
        >ul:first-child{
            width: vw(176);
            height: vw(176);
            position:relative;
            li:first-child{
                >img{
                    width: 100%;
                }
            }
              >li:last-child{
                  font-size: vw(24);
                position: absolute;
                bottom: vw(45);
                 text-align: center;
                  width: 100%;
                  background-color:rgba($color: #ffffff, $alpha: 0.7);
              }
        }
        >ul:last-child{
            width: vw(462);
            height: vw(176);
            @extend .flex;
            align-items: center;
            >li:first-child{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width:vw(290) ;
                height: vw(176);
                >span:first-child{
                    font-size: vw(30);
                }
                >p{
                    font-size: vw(26);
                    color: #9f9f9f;
                    >img{
                        width: vw(32);
                     }
                }
                >p:last-child{
                    font-size: vw(24);
                     color: #9f9f9f;
                }
                >a{
                    font-size: vw(20);
                    color: $col;
                }
            }

            >li:last-child a{
                width: vw(110);
                height: vw(60);
                background-color: $col;
                font-size: vw(30);
                border-radius:vw(20) ;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
            }
        }
      
    }
}


// 底部导航栏
nav{

    @extend .sticky;

    >.bt{
        width: vw(750);
        height: vw(135);
        display: flex;
        justify-content: space-around;
    
        >p{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: vw(73);
            font-size: vw(26);
            img{
                width: vw(73);
                height: vw(73);
            }
            span{
                display: flex;
                justify-content: center;
            }
            
        }
    }
   
}